<template>
  <div>
    <el-form-item label="需求名称" prop="visionDemandName">
      <el-input v-model="formData.visionDemandName" size="small"></el-input>
    </el-form-item>
    <el-form-item label="需求类型" prop="visionDemandType">
      <el-select
        v-model="formData.visionDemandType"
        placeholder="请选择需求类型"
        size="small"
        filterable
        clearable
        :disabled="formData.visionDemandId"
      >
        <el-option
          v-for="item in VisionDemandTypeList"
          :key="item.key"
          :label="item.value"
          :value="item.key"
        ></el-option>
      </el-select>
    </el-form-item>
    <template v-if="formData.visionDemandType == 4">
      <el-form-item label="视频大小M" prop="visionDemandVideoInfoDTO.videoSize">
        <el-input-number
          v-model="formData.visionDemandVideoInfoDTO.videoSize"
          :min="0"
          size="small"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="视频格式" prop="visionDemandVideoInfoDTO.videoFormat">
        <el-autocomplete
          popper-class="my-autocomplete"
          v-model="formData.visionDemandVideoInfoDTO.videoFormat"
          :fetch-suggestions="FormatSearch"
          placeholder="请输入内容"
          size="small"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="视频比例" prop="visionDemandVideoInfoDTO.videoProportion">
        <el-autocomplete
          popper-class="my-autocomplete"
          v-model="formData.visionDemandVideoInfoDTO.videoProportion"
          :fetch-suggestions="ProportionSearch"
          placeholder="请输入内容"
          size="small"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="视频分辨率" prop="visionDemandVideoInfoDTO.videoResolution">
        <el-autocomplete
          popper-class="my-autocomplete"
          v-model="formData.visionDemandVideoInfoDTO.videoResolution"
          :fetch-suggestions="ResolutionSearch"
          placeholder="请输入内容"
          size="small"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="视频时长s" prop="visionDemandVideoInfoDTO.videoTime">
        <el-input-number
          v-model="formData.visionDemandVideoInfoDTO.videoTime"
          :min="0"
          :max="100"
          size="small"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="视频用途" prop="visionDemandVideoInfoDTO.videoUsage">
        <el-input v-model="formData.visionDemandVideoInfoDTO.videoUsage" size="small"></el-input>
      </el-form-item>
    </template>

    <el-form-item  prop="pageViewsPercentage" v-if="formData.visionDemandType === 2">
      <span slot="label">
        日均浏览量
         <el-popover
          placement="top-start"
          width="200"
          trigger="hover"
          content="全站点日均销量"
        >
          <i slot="reference" class="el-icon-question" style="color: #F44336;"></i>
        </el-popover>
      </span>
     
      <el-input-number v-model="formData.pageViewsPercentage" :step="1" :min="1" size="small"></el-input-number>
    </el-form-item>

    <el-form-item  prop="unitSessionPercentage" v-if="formData.visionDemandType === 2">
        <span slot="label">
        日均转化率%
         <el-popover
          placement="top-start"
          width="200"
          trigger="hover"
          content="全站点日均转化率%"
        >
          <i slot="reference" class="el-icon-question" style="color: #F44336;"></i>
        </el-popover>
      </span>
      <el-input-number
        v-model="formData.unitSessionPercentage"
        :step="0.1"
        :min="1"
        :max="100"
        size="small"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="发货日期" prop="deliveryTime">
      <el-date-picker v-model="formData.deliveryTime" type="date" placeholder="发货日期" size="small"></el-date-picker>
    </el-form-item>
    <el-form-item label="预测张数" prop="deliveryTime" v-if="formData.visionDemandType !== 4">
      <el-input-number v-model="formData.predictResultImgTotal" :min="0" size="small"></el-input-number>
    </el-form-item>
    <el-form-item label="BU" prop="businessUnitId">
      <BU :form="formData" formId="businessUnitId" size="small" @selectAll="Bu" @selectDel="Bu"></BU>
    </el-form-item>
    <el-form-item label="系列" prop="productCategoryId">
      <category
        ref="category"
        :form="formData"
        formId="productCategoryId"
        formBU="businessUnitId"
        @selectAll="Category"
        @selectDel="Category"
        size="small"
      ></category>
    </el-form-item>
    <el-form-item label="型号" prop="productId">
      <el-select v-model="formData.productId" placeholder="请选择" filterable size="small">
        <el-option
          v-for="item in ProductList"
          :key="item.key"
          :label="item.productModelNumber"
          :value="item.productId"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label label-width="10px">
      <el-button
        type="primary"
        @click="$emit('submitForm','formData')"
        size="small"
        :icon="loading?'el-icon-loading': formData.visionDemandId?'el-icon-edit': 'el-icon-circle-plus-outline'"
        :disabled="loading"
      >保存</el-button>
      <el-button
        @click="$emit('resetForm','formData') "
        size="small"
        icon="el-icon-circle-close"
        v-if="!this.formData.visionDemandId"
      >重置</el-button>
    </el-form-item>
    <el-backtop :bottom="80">
      <div @click.stop="$emit('submitForm','formData')" class="submit">
        <span>保存</span>
      </div>
    </el-backtop>
  </div>
</template>
<script>
const ERR_OK = 200;
import BU from "components/searchfor/bu";
import category from "components/searchfor/category";
import { Product } from "components/searchfor/http";
export default {
  props: {
    formData: Object
  },
  data() {
    return {
      VisionDemandTypeList: [],
      loading: false,
      ProductList: []
    };
  },
  created() {
    this.getVisionDemandTypeList();
    this.getProduct();
  },
  methods: {
    Bu() {
      this.$refs.category.getCategory();
      this.getProduct();
    },
    Category() {
      this.getProduct();
    },
    getProduct() {
      Product({
        businessUnitIds: this.formData.businessUnitId
          ? [this.formData.businessUnitId]
          : [],
        productCategoryIds: this.formData.productCategoryId
          ? [this.formData.productCategoryId]
          : []
      }).then(res => {
        if (res.data.code === ERR_OK) {
          this.ProductList = res.data.data.ProductModelNumber;
        }
      });
    },
    //获取视觉需求类型列表
    getVisionDemandTypeList() {
      this.$ajax
        .get(
          this.GLOBAL.oaVisionDemand +
            "/visionDemandBasicInfo/getVisionDemandTypeList"
        )
        .then(res => {
          if (res.data.code === ERR_OK) {
            this.VisionDemandTypeList = res.data.data;
          }
        });
    },
    FormatSearch(queryString, cb) {
      this.querySearch(queryString, cb, [{ value: "MP4" }, { value: "MOV" }]);
    },
    ProportionSearch(queryString, cb) {
      this.querySearch(queryString, cb, [{ value: "16:9" }, { value: "3:4" }]);
    },
    ResolutionSearch(queryString, cb) {
      this.querySearch(queryString, cb, [
        { value: "1920*1080" },
        { value: "1440*1920" }
      ]);
    },
    querySearch(queryString, cb, val) {
      var restaurants = val;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    }
  },
  components: {
    BU,
    category
  }
};
</script>
<style lang="stylus" scoped>
.submit {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;

  span {
    font-size: 14px;
  }

  &:hover {
    background: #409EFF;

    span {
      display: block;
      font-size: 14px;
      font-weight: bold;
      color: #ffffff;
    }
  }
}

.el-form {
  margin-top: 10px;
}

.el-form-item {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: top;
  width: 280px;
}

.el-date-editor.el-input {
  width: 200px;
}
</style>